<template>
  <div class="home">
    <div class="text-pane">
      <van-cell-group inset>
        <van-field v-model="unzipSourceViewText" autosize type="textarea" placeholder="报文信息" class="scrollable-field" />
      </van-cell-group>
    </div>
    <van-floating-bubble icon="chat" @click="handelShare" />
    <van-share-sheet v-model:show="showShare" class="copyTextBtn" title="立即分享给好友" :options="options"
      @select="onSelect" />
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { StringCompressor } from '@/utils/StringCompressor'
import { formatJson } from '@/utils/beautifyJson'
import Clipboard from 'clipboard'
import { showSuccessToast, showFailToast, showToast } from 'vant'

const route = useRoute()
const unzipSourceViewText = ref<string>('')
const screenHeight = ref<number>()

const urlParamText = computed<string>(() => {
  return (route.query.code as string) || ''
})

const unzipSourceText = () => {
  const decodeURISourceText = decodeURIComponent(urlParamText.value)
  const decompressSourceText = StringCompressor.decompressFromEncodedString(
    decodeURISourceText,
    'gzip',
    'base64',
  )
  unzipSourceViewText.value = formatJson(decompressSourceText)
}

onMounted(() => {
  unzipSourceText()
  nextTick(() => {
    screenHeight.value = window.innerHeight - 30
    document.documentElement.style.setProperty('--vh', `${screenHeight.value}px`)
  })
})

const handelCopyText = () => {
  const clipboard = new Clipboard('.copyTextBtn', {
    text: () => unzipSourceViewText.value,
  })
  clipboard.on('success', () => {
    showSuccessToast('复制成功！')
    clipboard.destroy()
  })

  clipboard.on('error', () => {
    showFailToast('复制失败，请手动复制')
    clipboard.destroy()
  })
}

const showShare = ref<boolean>(false);

interface IShareOption {
  key: string,
  name: string,
  icon: string
}

const options: IShareOption[] = [
  { key: 'copuText', name: '复制文本', icon: 'wechat' },
  { key: 'shareText', name: '分享文本', icon: 'weibo' },
  { key: 'copyPict', name: '复制图片', icon: 'link' },
  { key: 'sharePict', name: '分享图片', icon: 'poster' },
];

const handelShare = () => {
  showShare.value = true
}

const onSelect = (option: IShareOption): void => {
  switch (option.key) {
    case 'copuText':
      handelCopyText();
      break;
    case 'shareText':
      showToast(option.name);
      break;
    case 'copyPict':
      showToast(option.name);
      break;
    case 'sharePict':
      showToast(option.name);
      break;
    default:
      showToast(option.name);
      break;
  }
  showShare.value = false;
};

</script>

<style lang="scss" scoped>
.home {
  background-color: $primary-color;
  width: 100vw;
  height: 100vh;
  padding: 15px 0;
  overflow-x: hidden;
  overflow-y: hidden;

  .text-pane {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .scrollable-field {
      /* 关键样式 */
      overflow-y: auto;
      /* 允许纵向滚动 */
      height: var(--vh);
      /* 可选修饰 */
      resize: none;
      /* 禁止用户拖拽调整大小 */
      border: 1px solid #eee;
      padding: 8px;
    }
  }

}
</style>
